<template>
	<ppl-navbar title="校园兼职" bgColor="#E3EEFF">
		<view @click="back">
			<van-icon name="arrow-left" size="40rpx" />
		</view>
	</ppl-navbar>
	<view class="wrapper bg-linear">
		<!-- 加载状态 -->
		<view v-if="isLoading" class="loading">加载中...</view>
		<!-- 内容区域 -->
		<view v-else class="wrapper bg-color shadow1 boder-r-10">
			<view class="t-bold">{{detail.title}}</view>
			<view class="t-12 color4 p-t-14 p-b-20">{{detail.updateTime}}</view>
			<!-- 介绍内容完全展示，移除单行限制 -->
			<view class="color6 content-full">{{detail.requirements}}</view>
			<view class="code flex-c-c">
				<view v-if="hasImages" class="image-container">
					<view class="text-center" v-for="(item, index) in imagesArray" :key="index">
						<van-image :src="item" width="278rpx" height="265rpx" @error="handleImageError(index)"
							:class="{ 'image-loading': isImageLoading[index] }" />
					</view>
				</view>
				<view v-else class="no-image-tip">暂无图片</view>
				<view class="t-14 p-t-14">
					详情添加二维码了解
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		computed,
		watch,
		reactive
	} from 'vue';

	const id = ref('');
	const detail = ref({});
	const isLoading = ref(true);
	const isImageLoading = ref([]); // 图片加载状态

	// 计算属性：处理图片数组
	const imagesArray = computed(() => {
		if (!detail.value.images) return [];
		return detail.value.images.split(',').map(url => url.trim());
	});

	// 是否有图片
	const hasImages = computed(() => imagesArray.value.length > 0);



	onShow(() => {
		loadDetailData();
	});

	const loadDetailData = () => {
		isLoading.value = true;
		isImageLoading.value = []; // 重置图片加载状态

		try {
			const cachedData = uni.getStorageSync('currentJobDetail');
			console.log('缓存数据:', cachedData);

			if (cachedData) {
				setTimeout(() => {
					detail.value = {
						...cachedData
					};
					isLoading.value = false;
				}, 300);
			} else {
				setTimeout(() => {
					detail.value = {
						id: 1,
						title: '图书馆管理员',
						updateTime: '2024-11-21 14:30',
						requirements: '学校图书馆招聘兼职管理员2名，负责图书整理、借阅登记等工作。要求责任心强，有良好的沟通能力，每周可工作3-5天，每天3-4小时。薪资15元/小时，提供工作餐。',
						images: 'https://picsum.photos/500/500?random=1'
					};
					isLoading.value = false;
				}, 300);
			}
		} catch (error) {
			console.error('数据加载错误:', error);
			setTimeout(() => {
				detail.value = {
					id: 1,
					title: '图书馆管理员',
					updateTime: '2024-11-21 14:30',
					requirements: '学校图书馆招聘兼职管理员2名，负责图书整理、借阅登记等工作。要求责任心强，有良好的沟通能力，每周可工作3-5天，每天3-4小时。薪资15元/小时，提供工作餐。',
					images: 'https://picsum.photos/500/500?random=1'
				};
				isLoading.value = false;
			}, 300);
		}
	};

	// 图片加载错误处理
	const handleImageError = (index) => {
		console.log(`图片加载失败: ${imagesArray.value[index]}`);
		isImageLoading.value[index] = false; // 标记为加载失败
	};

	const back = () => {
		uni.navigateBack();
	};
</script>

<style scoped>
	.code {
		padding-top: 88rpx;
		display: flex;
		flex-direction: column;
	}

	.loading {
		text-align: center;
		padding: 80rpx 0;
		color: #999;
		font-size: 28rpx;
	}

	.image-container {
		width: 100%;
	}

	.no-image-tip {
		width: 100%;
		text-align: center;
		color: #999;
		padding: 20rpx 0;
	}

	.image-loading .van-image__preview {
		opacity: 0.5;
		border: 2rpx dashed #ddd;
	}

	/* 内容完全展示样式 */
	.content-full {
		color: #333;
		font-size: 28rpx;
		line-height: 1.8;
		margin-bottom: 20rpx;
		word-break: break-word;
		/* 允许长单词换行 */
	}
</style>